<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>

    <script src="/web/js/vue.min.js"></script>
    <script src="/web/js/axios.js"></script>
    <script src="/web/js/http.js"></script>
    <link href="/web/css/element.css" rel="stylesheet">
    <script src="/web/js/element.js"></script>
</head>

<body>
<div id="main">

    <el-row :gutter="20">
        <el-col :span="6">
            <div>
                <el-row class="tac">
                    <el-col :span="12">
                        <!--                        <h5>默认颜色</h5>-->
                        <el-menu
                                class="el-menu-vertical-demo"
                                default-active="2">
                            <el-menu-item index="2">
                                <span slot="title">导航二</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title" ><a href="user-role.html">用户/角色</a>  </span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>
        </el-col>

        <el-col :span="15">
            <el-row>
                <el-button type="primary" @click="superAdminTest()">需要super-admin角色</el-button>
                <el-button type="success" @click="updateItemsTest()">需要update-items权限</el-button>
                <el-button type="info" @click="userTest()">需要user角色</el-button>
            </el-row>
            <el-table
                    :data="tableData"
                    :row-class-name="tableRowClassName"
                    style="width: 100%">
                <el-table-column
                        label="id"
                        prop="id"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="商品名称"
                        prop="itemName"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="商品介绍"
                        prop="content">
                </el-table-column>
                <el-table-column
                        label="商品主图"
                        prop="imgUrl">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgUrl" style="width: 100px;height: 100px">
                    </template>
                </el-table-column>

                <el-table-column
                        label="商品辅图"
                        prop="imgListUrl">
                    <template slot-scope="scope">
                        <img v-for="img in scope.row.imgListUrl" :src="img" style="width: 100px;height: 100px">
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        prop="createdTime">
                </el-table-column>
                <el-table-column
                        label="修改时间"
                        prop="updateTime">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button size="small" type="text">查看</el-button>
                        <el-button size="small" type="text">编辑</el-button>
                        <el-button size="small" @click="addShoppingCart(scope.row.id)" type="text">加入购物车
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple"></div>
        </el-col>
    </el-row>

</div>
</body>

<script type="module">
    var app = new Vue({
        el: '#main',
        data: {
            name: '123',
            tableData: []
        },
        methods: {
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            pageItemsClick(current, size) {
                postRequest("/shopping_boot/App/items/pageItems", {size: size, current: current}).then(res => {
                    this.tableData = res.data.records;
                })
            },
            addShoppingCart(id) {
                getRequest('/shopping_boot/App/items/addShoppingCart?id=' + id).then(res => {
                    alert(res.msg);
                })
            },
            superAdminTest() {
                postRequest('/shopping_boot/items/superAdminTest').then(res => {
                    console.log(res)
                })
            },
            updateItemsTest() {
                postRequest('/shopping_boot/items/updateItems2').then(res => {
                    console.log(res)
                })
            },
            userTest() {
                postRequest('/shopping_boot/App/items/usertest').then(res => {
                    console.log(res)
                })
            }
        },
        mounted() {
            this.pageItemsClick(1, 10);
        }
    })
</script>
</html>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>